<template>
  <div class="parent-container">
    <el-card class="box-card">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="User" name="first"></el-tab-pane>
        <el-tab-pane label="Config" name="second"></el-tab-pane>
        <el-tab-pane label="Role" name="third"></el-tab-pane>
      </el-tabs>
      <template #header>
        <div class="card-header">
          <span>父组件 - 复选框状态管理</span>
        </div>
      </template>

      <div class="content">
        <!-- <h3>当前选中项: {{ selectedItems.join(", ") || "无" }}</h3>
        <p>选中数量: {{ selectedItems.length }}</p> -->

        <!-- 子组件 -->
        <!-- <checkbox-group
          ref="childMethods"
          :items="checkboxItems"
          @selection-change="handleSelectionChange"
        /> -->
        <component
          :items="checkboxItems"
          ref="childMethods"
          @selection-change="handleSelectionChange"
          is="CheckboxGroup"
        ></component>

        <!-- 控制按钮 -->
        <div class="control-panel">
          <el-button @click="selectAll" type="primary"> 全选 </el-button>
          <el-button @click="clearSelection" type="info"> 清空 </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import CheckboxGroup from "./son.vue";
import checkboxItems from "./radioData";

export default {
  name: "ParentComponent",
  components: {
    CheckboxGroup,
  },
  data() {
    return {
      selectedItems: [],
      checkboxItems,
      activeName: "first",
    };
  },
  methods: {
    handleSelectionChange(selectedItems) {
      //   console.log("父组件收到选中项:", selectedItems);

      console.log(
        this.$refs.childMethods.refClick(),
        "this.$refs.childMethods"
      );

      this.selectedItems = selectedItems;
    },
    selectAll() {
      this.selectedItems = this.checkboxItems.map((item) => item.value);
    },
    clearSelection() {
      this.selectedItems = [];
    },
    setTimeout,
  },
};
</script>

<style scoped>
.parent-container {
  padding: 20px;
}

.box-card {
  max-width: 600px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-panel {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.content {
  min-height: 200px;
}
</style>
